<template>
  <div>
    <el-container>
      <el-header class="head">
        <el-container>
          <el-main>
            <el-row :gutter="20" class="top1">
              <el-col :span="13">
                <div class="gdtj">
                  <topTime>
                    <template #title> 工单统计 </template>
                  </topTime>
                  <div class="bottom">
                    <div class="info">
                      <i>{{ list.total }}</i>
                      <span>工单总数（个）</span>
                    </div>
                    <div class="info">
                      <i>{{ list.completedTotal }}</i>
                      <span>完成工单（个）</span>
                    </div>
                    <div class="info">
                      <i>{{ list.progressTotal }}</i>
                      <span>进行工单（个）</span>
                    </div>
                    <div class="info">
                      <i>{{ list.cancelTotal }}</i>
                      <span>取消工单（个）</span>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="11" class="top11">
                <div class="xstj">
                  <topTime>
                    <template #title> 销售统计 </template>
                  </topTime>
                  <div class="bottom">
                    <div class="info">
                      <i>{{ allCount }}</i>
                      <span>订单量（个）</span>
                    </div>
                    <div class="info">
                      <i>{{ saleMoney }}</i>
                      <span>销售额（万元）</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row class="xsdata">
              <el-row>
                <el-col :span="10">
                  <topTime>
                    <template #title> 销售数据 </template>
                  </topTime>
                </el-col>
                <div class="button">
                  <div
                    class="week"
                    @click="changeModel('week')"
                    :class="active === 'week' ? 'active' : ''"
                  >
                    周
                  </div>
                  <div
                    class="month"
                    :class="active === 'month' ? 'active' : ''"
                    @click="changeModel('month')"
                  >
                    月
                  </div>
                  <div
                    class="year"
                    @click="changeModel('year')"
                    :class="active === 'year' ? 'active' : ''"
                  >
                    年
                  </div>
                </div>
              </el-row>
              <el-row class="echarts">
                <el-col :span="24" id="echart">
                  <div id="leftchart"></div>
                  <div id="rightchart"></div>
                </el-col>
              </el-row>
            </el-row>
          </el-main>
          <el-aside width="200px" class="dashaside">
            <topTime>
              <template #title> 商品热榜 </template>
            </topTime>
            <div class="bottom">
              <el-row
                :gutter="20"
                v-for="(item, index) in shopList"
                :key="index"
              >
                <el-col :span="2">
                  <div
                    class="bg"
                    :style="{
                      background: `url(${require(`@/imgs/top${
                        index > 2 ? 3 : index
                      }.png`)}) no-repeat center center`,
                    }"
                  >
                    {{ index + 1 }}
                  </div>
                </el-col>
                <el-col :span="16" class="shopname">{{ item.skuName }}</el-col>
                <el-col :span="6" class="shopcount">{{ item.count }} 单</el-col>
              </el-row>
            </div>
          </el-aside>
        </el-container>
      </el-header>
      <el-main></el-main>
    </el-container>
  </div>
</template>

<script>
import topTime from '@/components/topTime.vue'
import * as echarts from 'echarts'
import {
  getHeadInfo,
  getOrderCount,
  orderAmount,
  getskuTop,
  amountCollect,
  amountCollectBar
} from '@/api/gdInfo'
export default {
  components: { topTime },
  name: 'Dkd2Dashboard',

  data () {
    return {
      active: 'week',
      time: {
        start: '',
        end: ''
      },
      time2: {
        start: '',
        yearStart: '',
        end: '',
        weekago: ''
      },
      allCount: 0,
      saleMoney: 0,
      list: {
        cancelTotal: 0,
        completedTotal: 0,
        progressTotal: 0,
        total: 0
      },
      shopList: [],
      echarts1: {},
      echarts2: {}
    }
  },

  async mounted () {
    // console.log(111)
    await this.getTime()
    await this.getTime2()
    this.getHeadInfo()
    await this.changeModel('week')
    this.setEcharts()
  },

  methods: {
    getTime () {
      const firstDayOfMonth = this.$moment().startOf('month')
      this.time.start = this.$moment(firstDayOfMonth).format(
        'YYYY-MM-DD hh:mm:ss'
      )
      this.time.end = this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      // console.log(this.time.start)
      // console.log(this.time.end)
    },
    getTime2 () {
      const firstDayOfMonth = this.$moment().startOf('month')
      const firstDayOfYear = this.$moment().startOf('year')
      // 获取一周前
      this.time2.weekago = this.$moment()
        .subtract(6, 'days')
        .format('YYYY-MM-DD')
      // 获取本月第一天
      this.time2.start = this.$moment(firstDayOfMonth).format('YYYY-MM-DD')
      // 获取今年第一天
      this.time2.yearStart = this.$moment(firstDayOfYear).format('YYYY-MM-DD')
      // 获取当天
      this.time2.end = this.$moment(new Date()).format('YYYY-MM-DD')
      // console.log(this.time2.weekago)
      // console.log(this.time.start)
      // console.log(this.time.end)
    },
    async getHeadInfo () {
      // 工单统计
      const res = await getHeadInfo(this.time.start, this.time.end)
      // console.log(res)
      for (const key in res) {
        this.list.cancelTotal += res[key].cancelTotal
        this.list.completedTotal += res[key].completedTotal
        this.list.progressTotal += res[key].progressTotal
        this.list.total += res[key].total
      }
      // console.log(this.list)
      // 销售统计
      // 订单量
      const res2 = await getOrderCount(this.time)
      this.allCount = res2

      // 销售额
      const res3 = await orderAmount(this.time)
      this.saleMoney = (res3 / 1000000).toFixed(2)
      // console.log(res3)

      // 获取销量前10的商品
      await this.getTime2()
      const res4 = await getskuTop(this.time2.start, this.time2.end)
      this.shopList = res4
      // console.log(this.shopList)
    },
    async changeModel (val) {
      this.active = val

      try {
        // 获取echarts信息
      // 获取销售额统计
        if (val === 'week') {
          const res = await amountCollect(1, this.time2.weekago, this.time2.end)
          const res2 = await amountCollectBar(this.time2.weekago, this.time2.end)
          // console.log(res2)
          this.$set(this.echarts1, 'series', res.series)
          this.$set(this.echarts1, 'xAxis', this.transformToweek(res.xAxis))
          this.$set(this.echarts2, 'series', res2.series)
          this.$set(this.echarts2, 'xAxis', res2.xAxis)
        } else if (val === 'month') {
          const res = await amountCollect(1, this.time2.start, this.time2.end)
          const res2 = await amountCollectBar(this.time2.start, this.time2.end)
          // console.log(res2)

          this.$set(this.echarts1, 'series', res.series)
          this.$set(this.echarts1, 'xAxis', res.xAxis)
          this.$set(this.echarts2, 'series', res2.series)
          this.$set(this.echarts2, 'xAxis', res2.xAxis)
        // console.log(res)
        } else if (val === 'year') {
          const res = await amountCollect(2, this.time2.yearStart, this.time2.end)
          const res2 = await amountCollectBar(this.time2.yearStart, this.time2.end)
          // console.log(res2)
          this.$set(this.echarts1, 'series', res.series)
          this.$set(this.echarts1, 'xAxis', res.xAxis)

          this.$set(this.echarts2, 'series', res2.series)
          this.$set(this.echarts2, 'xAxis', res2.xAxis)
        }
      } finally {
        this.setEcharts()
      }
    },

    // 将年月日转换为星期几的函数
    transformToweek (arr) {
      const dateStrings = arr
      const weekdays = ['日', '一', '二', '三', '四', '五', '六']

      const formattedDates = dateStrings.map((dateString) => {
        const date = new Date(dateString)
        const dayOfWeek = weekdays[date.getDay()]

        return `星期${dayOfWeek}`
      })
      // console.log(formattedDates)
      return formattedDates
    },
    // 将年月日转化为月日的函数
    // 设置Echarts
    setEcharts () {
      // 左侧echarts
      // 绘制图表
      const myChart1 = echarts.init(document.getElementById('leftchart'))
      myChart1.setOption({
        title: {
          text: '销售额趋势图'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let result = ''
            for (let i = 0; i < params.length; i++) {
              result += params[i].seriesName + '：' + params[i].value + '<br/>'
            }
            result += params[0].name + '<br/>'

            return result
          }
        },
        xAxis: {
          data: this.echarts1.xAxis,
          axisPointer: {
            show: true,
            type: 'line', // 改成直线指示器
            snap: true, // 是否自动对齐到点上
            lineStyle: {
              color: 'grey',
              type: 'dotted' // 线条类型
            }
          }
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'line',
            data: this.echarts1.series.map((item) => item / 100),
            smooth: true,
            lineStyle: {
              color: 'red'
            },
            itemStyle: {
              color: '#ff5757',
              borderColor: '#333',
              borderWidth: 2
            },
            emphasis: {
              itemStyle: {
                borderWidth: 2,
                borderColor: '#ff5757',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 0, 0, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      })
      // 右侧echarts
      const myChart2 = echarts.init(document.getElementById('rightchart'))
      // 绘制图表
      myChart2.setOption({
        title: {
          text: '销售额分布'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let result = ''
            for (let i = 0; i < params.length; i++) {
              result += params[i].seriesName + '：' + params[i].value + '<br/>'
            }
            result += params[0].name + '<br/>'

            return result
          }
        },
        xAxis: {
          data: this.echarts2.xAxis
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.echarts2.series.map((item) => item / 100),
            smooth: true,

            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 0, 0, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-aside {
  background-color: #fff !important;
  color: #333;
  height: 538px;
  margin-left: 20px;
  width: 400px !important;
  border-radius: 20px;
  padding: 20px;
  .top {
    margin-bottom: 20px;
  }
  .bottom {
    background-color: #fff;
    margin-top: 10px;
    .bg {
      width: 20px;
      height: 20px;
      font-size: 12px;
      color: #999;
    }
  }
  .shopname {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .shopcount {
    font-size: 14px;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 100%;
  padding: 0;
  .xsdata {
    background-color: #fff;
    height: 100%;
    padding: 20px;
    border-radius: 20px;
    .button {
      display: flex;
      margin-left: 880px;
      height: 34px;
      justify-content: space-evenly;
      align-items: center;
      background: rgba(233, 243, 255, 0.37);
      border-radius: 10px;
      .week,
      .month,
      .year {
        cursor: pointer;
        color: #999;
        font-size: 14px;
        width: 37px;
      }
      .active {
        background: #fff;
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        border-radius: 7px;
        font-weight: 600;
        color: #161616 !important;
        width: 37px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: #9ca3b4;
      }
    }
    .echarts {
      margin-top: -10px;
    }
    #echart {
      margin-top: 5px;
      height: 278px;
      display: flex;
      #leftchart {
        // background-color: #803434;
        flex: 1;
      }
      #rightchart {
        // background-color: #0fb12a;
        flex: 1;
      }
    }
  }
}

body > .el-container {
  margin-bottom: 40px;
}
/deep/.el-row {
  margin-bottom: 10px;
  width: 100%;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.gdtj {
  padding: 10px 20px;
  border-radius: 20px;
  width: 100%;
  height: 166px;
  background-color: #e9f3ff;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  background-image: url('@/imgs/gdtj1.png'), url('@/imgs/gdtj2.png');
  .bottom {
    height: 108px;
    // background-color: #f55f5f;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .info {
      // background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
        color: #072074;
        font-size: 36px;
        font-weight: 600;
      }
      span {
        color: #91a7dc;
        font-size: 12px;
      }
    }
  }
}

.xstj {
  padding: 10px 20px;
  border-radius: 20px;
  width: 105%;
  height: 166px;
  background-color: #fbefe8;
  background: #fbefe8 url('@/imgs/xstj1.png') no-repeat calc(100% - 12px) 100%;
  border-radius: 20px;

  width: 100%;
  height: 166px;
  .bottom {
    height: 108px;
    // background-color: #f55f5f;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .info {
      // background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
        color: #ff5757;
        font-size: 36px;
        font-weight: 600;
      }
      span {
        color: #91a7dc;
        font-size: 12px;
      }
    }
  }
}
.head {
  height: 538px !important;
  .top1 {
    padding: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .top11 {
    padding-right: 0 !important;
  }
}
</style>
